<template>
  <div class="map-container" ref="chartsDom"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
//@ts-ignore,引入china_map地图json数据
import china_map_json from "./china_map.json";
import { onMounted, ref } from "vue";

//获取原生dom
let chartsDom = ref();

//注册中国地图
echarts.registerMap("china",china_map_json);

//生命周期
onMounted(()=>{
  let mycharts = echarts.init(chartsDom.value);
  //配置项
  mycharts.setOption({
    //地图组件
    geo:{
      map:"china",  //中国地图
      roam:true,  //是否支持鼠标缩放
      //地图位置调试
      left:0,
      top:0,
      right:0,
      bottom:0,
      //地图文字设置
      label:{
        show:true,
        color:"white"
      },
      //每一个多边形的样式
      itemStyle:{
        color:'skyblue'
      }
    },
    //系列设置,航线
    series:[
      {
        type:"lines",  //航线
        data:[
          {
            coords:[[116.405285,39.904989],[119.306239,26.075302]],
            //统一样式设置
            lineStyle:{
              color:'red',
              width:5
            },
          },
          {
            coords:[[115.892151,28.676493],[120.51865306,23.46078502]],
            lineStyle:{
              color:'red',
              width:5
            },
          },
          { 
            coords:[[113.280637,23.125178],[ 91.132212,29.660361]],
            lineStyle:{
              color:'red',
              width:5
            },
          },
          {
            coords:[[113.280637,23.125178],[87.617733,43.792818]],
            lineStyle:{
              color:'red',
              width:5
            },
          }
        ],
        //是否显示特效
        effect:{
          show:true,
          symbol:'arrow',
          color:'blue',
          symbolSize:15
        }
      }
    ]
  })
})

</script>
<script lang="ts">
export default {
    name:"Map"
}
</script>